.drag-item.ivu-card /deep/ .ivu-card-body {
  padding: 8px;
}

.drag-item {
  margin: 5px;
  float: left;
  min-width: 180px;
  cursor: move;

  img {
    width: 20px;
    height: 20px;
    float: right;
  }
}

.form-canvas {
  margin: auto;
  width: 490px;
  height: 670px;
  background: url('/image/template/phone.png') no-repeat top;
  background-size: 100% 100%;
}

.form-canvas-inner {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 292px;
  height: 480px;
  top: 73px;
  margin: auto;
  max-height: 480px;
  background: #f6f6f6;
}

.form-canvas-body {
  overflow: hidden;
  padding-bottom: 30px;
  min-height: 400px;
}

.empty.form-canvas-inner {
  background: #fff;
}

.empty {
  .form-canvas-body {
    background: url('/image/template/empty.png') no-repeat 50%;
    background-size: 239px 96px;
    position: relative;
    min-height: 400px;
  }
}

.template-item {
  margin: 5px 0;
  cursor: move;
  border-radius: 0;
  width: 100%;
  border: 1px solid #ffffff;
}

.template-item.ivu-card /deep/ .ivu-card-body {
  padding: 12px 16px;
}

.template-item.ivu-card-dis-hover:hover {
  border: 1px dashed #38adff;
  .close-icon {
    display: block;
  }
}

.template-icon {
  .field-placeholder {
    right: 20px;
  }
}

.field {
  position: relative;
}

.field-label {
  display: inline-block;
  word-wrap:break-word;
  vertical-align: middle;
  line-height: 24px;
  font-size: 14px;
  color: #222;
  max-width: 42%;
}

.field-label-setting {
  font-weight: 700;
  font-size: 14px;
  color: #191f25;
}

.field-placeholder {
  display: inline-block;
  position: absolute;
  word-wrap:break-word;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  right: 0;
  color: #515a6e;
  line-height: 24px;
  font-size: 14px;
  color: rgba(25, 31, 37, .4);
  max-width: 45%;
}

.field-icon {
  display: inline-block;
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  right: 0;
  color: rgba(25, 31, 37, .4);

  i {
    line-height: 24px;
  }
}

.option-icon {
  color: #3296fa;
  margin-left: 5px;
}

.cn-format {
  color: rgba(25,31,37,.4);
  font-size: 12px;
  padding: 5px 0 0 0;
}

.template-range.ivu-card /deep/ .ivu-card-body {
  padding: 12px 0;
}

.rang-field {
  position: relative;
  padding: 0 16px;

  .field-placeholder {
    right: 36px;
  }
  .field-icon {
    right: 16px;
  }
}

.range-divider.ivu-divider-horizontal {
  margin: 12px 0;
}

.template-detail.ivu-card /deep/ .ivu-card-body {
  padding: 0;
}

.template-detail.ivu-card-dis-hover:hover {
  border: 1px solid #ffffff;
  .close-icon {
    display: none;
  }
}

.detail-title {
  display: block;
  padding: 12px 16px;
  color: rgba(25,31,37,.56);
  border-bottom: 1px solid rgba(25,31,37,.08);
}

.detail-body {
  min-height: 90px;
  background: #ddeff3;
  display: inline-block;
  width: 100%;
}

.detail-item {
  margin: 0 0 1px 0;
  cursor: move;
  border-radius: 0;
  width: 100%;
  border: 1px solid #ffffff;
}
.detail-item.ivu-card /deep/ .ivu-card-body {
  padding: 12px 16px;
}

.detail-item.ivu-card-dis-hover:hover {
  border: 1px dashed #38adff;
  .close-icon {
    display: block;
  }
}

.detail-range.ivu-card /deep/ .ivu-card-body {
  padding: 12px 0;
}

.detail-bottom {
  display: block;
  padding: 12px 16px;
  color: #008cee;
  text-align: center;
  line-height: 1.5;

  i {
    margin-right: 5px;
    line-height: 1.5;
    vertical-align: middle;
  }

  span {
    vertical-align: middle;
  }
}

.active {
  border: 1px solid #38adff;
}

.active.ivu-card-dis-hover:hover {
  border: 1px solid #38adff;
  & > .ivu-card-body > .close-icon {
    display: block;
  }
}

.hover {
  border: 1px dashed #38adff !important;
  & > .ivu-card-body > .close-icon {
    display: block !important;
  }
}
.active.hover {
  border: 1px solid #38adff !important;
  & > .ivu-card-body > .close-icon {
    display: block !important;
  }
}

.close-icon {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 1;
  display: none;
  color: #ffffff;
  cursor: pointer;
  z-index: 10;
  background: #38adff;
}

.break-word {
  word-wrap: break-word;
}

.ghost {
  opacity: 0.5;
  background: #f6f6f6;
}
